<template>
  <div class="whole-study">
    <div class="head-title">风险分析</div>
    <div class="search-time">
      <el-form ref="formRef" :inline="true" :model="filterForm">
        <el-form-item label="时间范围:" prop="times">
          <el-date-picker
            v-model="filterForm.times"
            type="daterange"
            :clearable="false"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="body-wrap">
      <div class="left-wrap">
        <div class="body-title">投资金额</div>
        <div class="echarts-wrap">
          <Echarts
            v-if="moneyOptionsFlag"
            :options="moneyOptions"
            :id="'one'"
            height="100%"
            width="100%"
          ></Echarts>
          <div class="no-content" v-else>
            <img :src="require('@/framework/assets/no-render.png')" />
            <div class="content">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="right-wrap">
        <div class="body-title">投资占比</div>
        <div class="echarts-wrap">
          <Echarts
            v-if="percentOptionsFlag"
            :options="percentOptions"
            :id="'one'"
            height="100%"
            width="100%"
          ></Echarts>
          <div class="no-content" v-else>
            <img :src="require('@/framework/assets/no-render.png')" />
            <div class="content">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <div class="body-wrap">
      <div class="left-wrap">
        <div class="body-title empty-wrap">1</div>
        <Echarts
          v-if="transformOptionsFlag"
          :options="transformOptions"
          :id="'one'"
          height="100%"
          width="100%"
        ></Echarts>
        <div class="no-content" v-else>
          <img :src="require('@/framework/assets/no-render.png')" />
          <div class="content">暂无数据</div>
        </div>
      </div>
      <div class="right-wrap">
        <div class="body-title">项目情况</div>
        <div class="echarts-wrap">
          <Echarts
            v-if="statusOptionsFlag"
            :options="statusOptions"
            :id="'one'"
            height="100%"
            width="100%"
          ></Echarts>
          <div class="no-content" v-else>
            <img :src="require('@/framework/assets/no-render.png')" />
            <div class="content">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "./echarts.vue";
import studyApi from "@/api/investment/study";
import commonList from "@/utils/mixins/investment/commonList";

export default {
  name: "riskAssay",
  mixins: [commonList],
  components: {
    Echarts,
  },
  data() {
    return {
      filterForm: {
        times: '',
      },
      moneyOptionsFlag: true,
      percentOptionsFlag: true,
      statusOptionsFlag: true,
      transformOptionsFlag: false,

      MX_pageNav: {
        pageNo: 1,
        pageSize: 7,
      },
      // 投资金额
      moneyOptions: {
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            splitArea: { show: false },
            data: [],
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitArea: { show: false },
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
          },
        ],
        series: [
          {
            name: "金额",
            type: "line",
            data: [],
            symbol: "none",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#DBEFFF", // 渐变起始颜色
                  },
                  {
                    offset: 0.8,
                    color: "#DAEEFF", // 渐变结束颜色
                  },
                  {
                    offset: 1,
                    color: "#fff", // 渐变结束颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                width: 3,
                color: {
                  type: "linear",

                  colorStops: [
                    {
                      offset: 0,
                      color: "#1289FF", // 0% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            smooth: true,
          },
        ],
      },
      // 投资占比
      percentOptions: {
        color: [
          "#1289FF",
          "#36CBCA",
          "#8EC21F",
          "#FFB700",
          "#3DCB8D",
          "#FF5858",
        ],
        legend: {
          type: "scroll",
          orient: "vertical",
          itemWidth: 10, // 设置图例项的宽度
          itemHeight: 10,
          left: "70%",
          align: "left",
          top: "middle",
          textStyle: {
            color: "#8C8C8C",
          },
          height: 250,
        },
        series: [],
      },
      // 项目情况
      statusOptions: {
        tooltip: {
          trigger: "axis",
        },
        color: ["#1E8EFF", "#FF5858"],
        legend: {
          right: 0,
          itemHeight: 10,
          itemWidth: 10,
          data: [],
          borderRadius: 0,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          splitArea: { show: false },
          axisLine: {
            lineStyle: {
              color: "#CACACA",
            },
          },
          data: [],
        },
        yAxis: {
          type: "value",
          splitArea: { show: false },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#CACACA",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#CACACA",
            },
          },
        },
        series: [],
      },
      // 漏斗图
      transformOptions: {
        backgroundColor: "#ffffff",
        color: ["#5B8FF9", "#5AD8A6", "#5D7092", "#F6BD16"],
        grid: {
          left: "10%",
          right: "10%",
          top: "10%",
          bottom: "10%",
          height: "326",
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: false,
            boundaryGap: false,
            type: "category",
            data: ["转化率", "转化率", "转化率", "转化率", "转化率"],
          },
        ],
        series: [],
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      columns: [
        { prop: "name", label: `专班成员`, minWidth: "100px" },
        { prop: "content", label: `项目个数`, minWidth: "200px" },
      ],
    };
  },
  mounted() {
    this.initTimes()
  },
  watch: {
    "filterForm.times"(newVal) {
      this.MX_pageNav.pageNo = 1;
      this.renderPage();
    },
  },
  methods: {
    formatTime(time) {
      let timer = new Date(time)

      const year = timer.getFullYear() + ''
      const month = timer.getMonth() + 1 + ''
      const day = timer.getDate() + ''

      return `${year.padStart(4, '0')}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
    },
    initTimes() {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      this.$set(this.filterForm, 'times', [start, end])
    },
    renderPage() {
      this.initMoneyOptionsFn()
      this.initPercentOptionsFn()
      this.initStatusOptionsFn()
      this.initTransformOptionsFn()
    },
    async initMoneyOptionsFn() {
      const { data } = await studyApi.getInvestMonery({
        searchBeginTime: this.formatTime(this.filterForm.times[0]),
        searchEndTime: this.formatTime(this.filterForm.times[1]),
      });

      if (data.length) {
        this.moneyOptionsFlag = true;
      } else {
        this.moneyOptionsFlag = false;
      }

      let xAxisData = data.map(item => {
        return item.name
      })

      let seriesData = data.map(item => {
        return item.content
      })

      this.$set(this.moneyOptions.xAxis, 0, {
        type: "category",
        boundaryGap: false,
        splitArea: { show: false },
        data: xAxisData,
        axisLine: {
          lineStyle: {
            color: "#999",
          },
        },
      })

      this.$set(this.moneyOptions.series[0], "data", seriesData)
    },
    async initPercentOptionsFn() {
      const { data } = await studyApi.getInvestProportion({
        searchBeginTime: this.formatTime(this.filterForm.times[0]),
        searchEndTime: this.formatTime(this.filterForm.times[1]),
      });
      if (data.length) {
        this.percentOptionsFlag = true;
      } else {
        this.percentOptionsFlag = false;
      }

      let listArr = data.map((item) => {
        return {
          name: item.name,
          content: item.content,
          value: item.content,
        };
      });

      this.$set(this.percentOptions.series, 0, {
        name: "标题",
        type: "pie",
        center: ["35%", "50%"],
        radius: ["40%", "60%"],
        clockwise: false, //饼图的扇区是否是顺时针排布
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: true,
            position: "outter",
            formatter: function (parms) {
              return parms.data.name + "\n" + parms.data.content + '%';
            },
          },
        },
        labelLine: {
          normal: {
            length: 10,
            length2: 15,
            lineStyle: {
              type: "solid",
            },
          },
        },
        data: listArr,
      });
    },
    async initStatusOptionsFn() {
      const { data } = await studyApi.getStateType({
        searchBeginTime: this.formatTime(this.filterForm.times[0]),
        searchEndTime: this.formatTime(this.filterForm.times[1]),
      });

      if (data.length) {
        this.statusOptionsFlag = true;
      } else {
        this.statusOptionsFlag = false;
      }

      let legendData = data.map((item) => {
        return {
          name: item.name,
          icon: "rect",
        };
      });

      let xAxisData =
        data[0] &&
        data[0].investDtoList.map((item) => {
          return item.name;
        });

      let seriesData = data.map(item => {
        return {
          name: item.name,
          type: "line",
          smooth: false,
          data: item.investDtoList.map(item => Number(item.content))
        }
      })

      this.$set(this.statusOptions.legend, "data", legendData);

      this.$set(this.statusOptions.xAxis, "data", xAxisData);

      this.$set(this.statusOptions, "series", seriesData);
    },
    async initTransformOptionsFn() {
      const {
        data: { investDtoMap },
      } = await studyApi.getTaperStateType({
        searchBeginTime: this.formatTime(this.filterForm.times[0]),
        searchEndTime: this.formatTime(this.filterForm.times[1]),
      });

      if (investDtoMap.dataType.length) {
        this.transformOptionsFlag = true;
      } else {
        this.transformOptionsFlag = false;
      }

      let seriesData = investDtoMap.dataType.map((item, index) => {
        return {
          value: 90 - index * 15,
          name: item.name,
          num: item.content,
        };
      });

      this.$set(this.transformOptions.series, 0, {
        top: 30,
        type: "funnel",
        height: "240",
        gap: 0,
        minSize: 150,
        left: "10%",
        width: "50%",
        label: {
          show: true,
          position: "inside",
          fontSize: "14",
          formatter: function (d) {
            var ins = d.name + "{aa|}\n" + d.data.num;
            return ins;
          },
          rich: {
            aa: {
              padding: [8, 0, 6, 0],
            },
          },
        },
        data: seriesData,
      });

      let areaArr = investDtoMap.dataType.map((item, index) => {
        return {
          name: item.name,
          x: 200,
          y: 6 + index * 2,
        };
      });

      let color = ["#5B8FF9", "#5AD8A6", "#5D7092", "#F6BD16"];
      let linksArr = investDtoMap.conversion.map((item, index) => {
        return {
          source: investDtoMap.dataType[index].name,
          target: investDtoMap.dataType[index + 1].name,
          value: item,

          lineStyle: {
            normal: {
              curveness: 7,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color[index], // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: color[index + 1], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        };
      });

      this.$set(this.transformOptions.series, 1, {
        z: 1,
        top: 80,
        height: 165,
        width: 40,
        type: "graph",
        layout: "none",
        symbolSize: 0,
        roam: false,
        edgeSymbol: ["circle", "arrow"],
        lineStyle: {
          normal: {
            width: 2,
          },
        },
        edgeLabel: {
          normal: {
            show: true,
            rotate: 40,
            position: "middle",
            backgroundColor: "#e4f5da",
            borderRadius: 4,
            color: "#333",
            verticalAlign: "middle",
            fontSize: 12,
            legendHoverLink: true,
            padding: [3, 10, 5, 10],
            formatter: function (d) {
              console.log(d);
              if (d.value) {
                var ins = "{words|" + d.value + "%}";
                return ins;
              }
            },
            rich: {
              words: {
                color: "#333",
                position: "right",
                fontSize: 13,
                lineHeight: 20,

                padding: [0, 0, 5, 0],
              },
            },
          },
        },

        data: areaArr,

        links: linksArr,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.whole-study {
  padding: 0 20px;
  .empty-wrap {
    color: #fff;
    user-select: none;
  }
  .head-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .body-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    .left-wrap,
    .right-wrap {
      width: calc(50% - 7px);
      height: 320px;
    }
    .right-wrap {
      margin-left: 14px;
    }
    .body-title {
      font-size: 18px;
      font-weight: 600;
      padding: 8px;
    }
    .echarts-wrap {
      width: 100%;
      height: calc(100% - 40px);
    }
    .no-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #999;

      width: 100%;
      height: 100%;
      img {
        width: 210px;
        height: 105px;
      }
    }
  }
}
</style>
